<template>
    <div class="border border-2">
        <div id="editor"></div>
        <div className="text-gray-700 my-2 p-2 block  text-sm">
            <i class="el-icon-info"></i> 可点击菜单栏放大至全屏编辑,支持托放上传图片.
        </div>
    </div>
</template>

<script>
import 'codemirror/lib/codemirror.css'
import '@toast-ui/editor/dist/toastui-editor.css'
import '@toast-ui/editor/dist/i18n/zh-cn'
import Editor from '@toast-ui/editor'

export default {
    props: {
        value: {String},
        name: {String, default: 'editor'},
        //后台上传地址
        action: {type: String, required: true},
        //编辑器高度
        height: {type: String, default: '300px'},
        //显示方式
        previewStyle: {type: String, default: 'vertical'},
        placeholder: '请在底部切换编辑器模式，可同时支持拖放上传',
        initialEditType: {type: String, default: 'markdown'},//markdown模式
        // initialEditType: {type: String, default: 'wysiwyg'}
    },
    data() {
        return {
            //编辑器对象
            editor: null,
        }
    },
    mounted() {
        this.init()
    },
    watch: {
        value(n, o) {
            this.setContent(n)
        }
    },

    methods: {
        init() {
            this.initEditor()
            this.fullScreenEvent()
        },
        initEditor() {
            const Vue = this
            const editor = new Editor({
                el: document.querySelector('#editor'),
                previewStyle: this.previewStyle,
                initialValue: Vue.value,
                initialEditType: this.initialEditType,
                height: this.height,
                language: 'zh-CN',
                placeholder: '请输入内容',
                events: {
                    // 监听编辑器输入
                    change: function () {
                        //判断当前采用什么方式进行输入
                        Vue.$emit('input', editor.getMarkdown())
                    }
                },
                hooks: {
                    async addImageBlobHook(blob, callback) {
                        let formData = new FormData()
                        //添加post数据
                        formData.append('file', blob, blob.name)
                        //上传图片
                        let response = await Vue.axios.post(Vue.action, formData)

                        //更改编辑器内容
                        callback(response.path, blob.name)
                        return false
                    },
                },
                toolbarItems: this.toolbar()
            })
            this.editor = editor
        },
        //设置编辑器内容
        setContent(content = '') {
            this.editor.setMarkdown(content)
        },
        //添加工具条按钮
        createButton(className) {
            const button = document.createElement('button')
            button.className = className
            button.innerHTML = `<i class="block el-icon-full-screen text-base text-gray-700 pb-1" style="display:block"></i>`
            return button
        },
        //添加全屏按钮事件
        fullScreenEvent() {
            const toolbar = this.editor.getUI().getToolbar()
            const cm = this.editor.mdEditor.cm
            //设置按钮点击事件
            this.editor.eventManager.addEventType('fullscreen')
            this.editor.eventManager.listen('fullscreen', () => {
                this.editor.previewStyle = 'vertical'
                //保存点击状态
                cm.setOption('fullScreen', !cm.getOption('fullScreen'))
                let ui = document.querySelector('.tui-editor-defaultUI')
                if (cm.getOption('fullScreen')) {
                    ui.classList.add('fullScreen')
                } else {
                    ui.classList.remove('fullScreen')
                }
            })
        },
        //自定义工具条
        toolbar() {
            return [
                {
                    type: 'button',
                    options: {
                        el: this.createButton('last'),
                        name: 'fullscreen',
                        tooltip: '全屏',
                        event: 'fullscreen',
                    }
                },
                'divider',
                'codeblock',
                'divider',
                'heading',
                'bold',
                'italic',
                'strike',
                'divider',
                'hr',
                'quote',
                'divider',
                'ul',
                'ol',
                'task',
                'indent',
                'outdent',
                'divider',
                'table',
                'image',
                'link',
                'divider'
            ]
        }
    }
}
</script>
<style lang="scss">
// 事件按钮需要使用类所以不能加scoped
.fullScreen {
    position: fixed !important;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
}

.te-mode-switch {
    display: none;
}

.tui-editor-defaultUI {
    border: 1px;
}
</style>
